<script setup lang="ts" name="JxtechUserTipExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechUserTip } from "@whjxtech/jxtech-component";
import { downloadFileUrl } from "@/api/modules/org/file-attachment";
import userBeanServiceApi from "@/api/modules/org/bean/user-bean";

interface JxtechUserTipExtProps {
  /**用户ID */
  userId: string;
  /**Tooltip 主题，内置了 dark / light 两种 */
  effect?: "dark" | "light";
  /**content 中的内容是否作为 HTML 字符串处理 */
  rawContent?: boolean;
  /**Tooltip 组件出现的位置 */
  placement?:
    | "top"
    | "top-start"
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end"
    | "right"
    | "right-start"
    | "right-end";
  /**Tooltip 组件是否禁用 */
  disabled?: boolean;
  /**出现位置的偏移量 */
  offset?: number;
  /**为 Tooltip 的 popper 添加类名 */
  popperClass?: string;
}

const props = withDefaults(defineProps<JxtechUserTipExtProps>(), {
  effect: "light",
  rawContent: false,
  placement: "bottom",
  offset: 12
});

const JxtechUserTipExtState = reactive({
  loadData: () => {
    return userBeanServiceApi.queryById(props.userId, { refCols: "default" });
  }
});
</script>

<template>
  <jxtech-user-tip
    :load-data="JxtechUserTipExtState.loadData"
    :download-file-url="downloadFileUrl"
    :effect="effect"
    :raw-content="rawContent"
    :placement="placement"
    :disabled="disabled"
    :offset="offset"
    :popper-class="popperClass"
  ></jxtech-user-tip>
</template>

<style lang="scss" scoped></style>
